<template>
  <div class="box">
    <baidu :width="width" :height="height"></baidu>
    <div class="pos">
      <div class="pos-head">
        半个月定位历史
      </div>
      <ul>
        <li>
          <span>天津</span>
          <span class="pos-time">2016-11-17 18:52:10</span>
        </li>
        <li>
          <span>天津</span>
          <span class="pos-time">2016-11-17 18:52:10</span>
        </li>
        <li>
          <span>天津</span>
          <span class="pos-time">2016-11-17 18:52:10</span>
        </li>
        <li>
          <span>天津</span>
          <span class="pos-time">2016-11-17 18:52:10</span>
        </li>
      </ul>
      <div class="pos-bottom">
        <el-button type="success" id="pos-btn">成功按钮</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import baidu from '@/components/BaiDu'
  export default {
    components: {
      baidu
    },
    data(){
      return {
        width: '100%',
        height: '600px'
      }
    }
  }
</script>
<style lang="scss">
  .box {
    position: relative;
  }

  .pos {
    height: 500px;
    width: 250px;
    background-color: rgba(255,255,255,.9);
    position: absolute;
    top: 20px;
    right: 20px;
    .pos-head {
      border-bottom: 1px solid grey;
      padding-left: 15px;
      font-size: 16px;
      font-weight: bolder;
      line-height: 3;
    }
    ul {
      padding: 0 15px;
      li {
        font-size: 14px;
        line-height: 3;
        border-bottom: 1px dashed grey;
        .pos-time {
          float: right;
          color: #0086b3;
        }
      }
    }
    .pos-bottom {
      width: 100%;
      height: 50px;
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: rgba(242, 243, 243, 0.8);
      #pos-btn {
        height: 30px;
        margin: 10px;
        float: right;
      }
    }
  }
</style>
